<template>
  <VueEditor v-model="content" :customModules="customModulesForEditor" :editorOptions="editorSettings" class="as-quill" ref="quillTemRef"></VueEditor>
</template>

<script>
  import {VueEditor, Quill} from 'vue2-editor'
  import {ImageDrop} from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'

  // Quill.register('modules/imageDrop', ImageDrop)
  // Quill.register('modules/imageResize', ImageResize)

  export default {
    name: "AsQuill",
    components: {VueEditor},
    props: {
      value: {type: String, default: ''}
    },
    data() {
      return {
        content: '',
        customModulesForEditor: [
          { alias: "imageDrop", module: ImageDrop },
          { alias: "imageResize", module: ImageResize }
        ],
        editorSettings: {
          modules: {imageDrop: true, imageResize: {}}
        }
      }
    },
    mounted() {
    },
    watch: {
      value(val, oldVal) {
        if (val !== oldVal) this.$set(this, 'content', val);
      },
      content(val, oldVal) {
        this.$emit('input', val)
      }
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
  .as-quill {
  }
</style>
